<template>
  <!--
   * @FileDescription: 出入人员数量
   * @author Sun Yan
   * @Date $
  -->
  <module-card-title class="academy-main-count-container" title="出入人员数量">
    <div slot="title-right">月份： {{ '6月' }}</div>
    <div ref="echartsBox" style="width: 100%; height: 270px"></div>
  </module-card-title>
</template>
<script>
import {throttle} from "@u";

/**
 * @description: 方法描述
 * @param {参数类型} 参数名称
 * @param {参数类型} 参数名称
 * @return void
 */
function getVirtulData(year) {
  year = year || '2017';
  var date = +echarts.number.parseDate(year + '-01-01');
  // var end = +echarts.number.parseDate((+year + 1) + '-01-01');
  var end = +echarts.number.parseDate((year) + '-02-01');
  var dayTime = 3600 * 24 * 1000;
  var data = [];
  for (var time = date; time < end; time += dayTime) {
    data.push([
      echarts.format.formatTime('yyyy-MM-dd', time),
      Math.floor(Math.random() * 1000)
    ]);
  }
  return data;
}

export default {
  name: "academy-main-count",
  data() {
    return {
      chart: null
    }
  },

  created() {
    window.addEventListener("resize", this.mianResize)
  },

  computed: {
    options() {
      const body = {

        tooltip: {
          position: 'top',
          extraCssText: 'z-index: 2',

          formatter: function (p) {
            var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]);
            return format + ': ' + p.data[1];
          }
        },

        visualMap: {
          // type: 'continuous',
          min: 0,
          max: 1000,
          left: '0',
          top: '50',
          itemWidth: 10,
          itemHeight: 160,
          // align: 'right',

          range: [0, 1000],
          calculable: true,
          realtime: true,
          orient: 'vertical',
          // color: ['#bf444c', '#d88273', '#f6efa6'],
          textStyle: {
            color: '#FFF'
          },
          inRange: {
            color: ['#ecfa79', '#4cd964', '#52ffff', '#007aff']
          },
        },



        calendar: [
          {
            left: 50,
            right: 0,
            top: 50,
            bottom: 10,
            cellSize: [20, 'auto'],
            orient: 'vertical',
            range: ['2017-01'],

            yearLabel: {
              show: false,
              // fontSize: 30,
              // radioSize: ['40%', '80%'],
            },

            splitLine: {
              show: false,
              lineStyle: {
                // 设置月份分割线的颜色
                color: '#D3D3D3',
                width: 20,
                type: 'solid'
              }
            },

            itemStyle: {
              normal: {
                // 设置背景颜色
                color: 'rgba(0,0,0,0)',
                borderWidth: 10,
                // 设置方块分割线段颜色
                borderColor: 'rgba(0,0,0,0)',
              }
            },

            dayLabel: {
              // backgroundColor: '#ff4f5e',
              margin: 5,
              firstDay: 1,
              color: '#FFF',
            },

          },
        ],

        series: [
          {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: getVirtulData(2017)
          }
        ]


      };
      return body
    },
  },

  watch: {
    options: {
      immediate: true,
      handler: function () {
        this.$nextTick(_ => this.setEchartData());
      }
    }
  },

  methods: {
    //echart options 数据 完毕调用
    setEchartData() {
      this.$nextTick(_ => {
        const chartDom = this.$refs.echartsBox || {};
        if (this.chart === null) {
          this.chart = echarts.init(chartDom)
          this.chart.setOption(this.options)
        } else {
          this.chart.clear();
          this.chart.setOption(this.options)
        }
      })
    },

    mianResize: throttle(function () {
      this.$nextTick(_ => {
        const chartDom = this.$refs.echartsBox || {};

        this.chart && this.chart.resize({
          height: `${chartDom.clientHeight}px`,
          width: `${chartDom.clientWidth}px`
        });

        this.chart = echarts.init(chartDom)
        this.chart.setOption(this.options)

      })
    }),

  }
}
</script>

<style scoped>

</style>